<template>
	<view class="page-content">
		<default-navbar pageTitle="项目详情"></default-navbar>
		<view class="main">
			<view class="detail">
				<view class="header">
					<view class="projectName">
						<view class="text">
							<i :class="['iconfont', 'projectStatus', expression(projectDetail)]">
							</i>
							<view class="t">
								{{ projectDetail.projectName }}
							</view>
						</view>
						<view class="putIcon" v-if="hasPermission('miniapp:project:edit')">
							<i class="iconfont icon-xiugai" @click="editProject"></i>
						</view>
					</view>
					<view class="data">
						<view class="enterpriseName"> <dict-tag :options="userList_data"
								:dictValue="projectDetail.enterpriseId" labelFiled="text"
								valueFiled="value"></dict-tag>&nbsp;<text v-if="_isShowUserIcon == '1'">|</text>&nbsp;<i
								class="iconfont icon-biaojitubiao-youshangjiantou" @click="linktoUserDetail" v-if="_isShowUserIcon == '1'"></i>
						</view>
						<view class="" style="padding: 10rpx 0;"> {{ projectDetail.contactName }}&nbsp;|&nbsp;{{ projectDetail.contactTitle }}&nbsp;|&nbsp;
							{{ projectDetail.contactInformation }}
						</view>
						<view class=""> 首次接触&nbsp;|&nbsp;{{ projectDetail.firstContactDate }} </view>
					</view>
				</view>
				<view class="subHeader">
					<view class=""> {{ projectDetail.chargeName }}&nbsp;|&nbsp;<dict-tag labelFiled="deptName"
							valueFiled="deptId" :options="deptList_data"
							:dictValue="projectDetail.deptId"></dict-tag> </view>
					<view class=""> 团队成员&nbsp;|&nbsp;{{ projectDetail.teamInfo }} </view>
				</view>
			</view>

			<view class="list">
				<view class="table">
					<view class="tabHeader">
						<view class="headerMain">
							<view class="time">
								拜访时间
							</view>
							<view class="status"> 合作状态 </view>
							<view class="intention"> 意向度 </view>
							<view class="operate"> </view>
						</view>
					</view>
					<view class="tabBody">
						<view class="item" v-for="(item, index) in projectDetail.visitList" :key="index"
							@click="linktoVisitDetail(item.visitId)">
							<view class="time">{{ item.visitDate }}</view>
							<view class="status"><dict-tag :options="visit_cooperation_List_data"
									:dictValue="item.cooperationStatus"></dict-tag></view>
							<view class="intention">
								<i :class="['iconfont', expression(item)]">

								</i>
								<dict-tag :options="intentionLevelList_data"
									:dictValue="item.intentionLevel"></dict-tag>
							</view>
							<view class="operate">
								<i class="iconfont icon-youjiantou"></i>
							</view>
						</view>

						<view class="noData" v-if="!projectDetail.visitList || !projectDetail.visitList.length">
							<up-divider text="暂无拜访记录" :hairline="true"></up-divider>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 悬浮球 -->
		<movable-area class="movable-area" :style="{ 'height': `calc(100% - 500rpx)` }" v-if="hasPermission('miniapp:visit:add')">
			<movable-view class="movable-view" :x="10000" :y="200" direction="vertical">
				<view class="movable-view-main">
					<view class="iconBox" @click="linkToAddvisit">
						<img src="@/static/common/visitIcon.png" alt="" class="icon" />
					</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from "vue";
	import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
	//组件
	import defaultNavbar from "@/components/defaultNavbar/index.vue";
	import dictTag from "@/components/dictTag/index.vue";
	//接口
	import type { ProjectItemTemplate, ProjectItemResult } from "./types"
	import { projectItem } from "@/api/projectList/index"
	import { contactTitleList } from "@/api/common/index"
	//hoks
	import useAppHookds from "@/appHooks/useViewModel"
	import useDataList from "@/appHooks/useDataList"
	let {
		getDeptList,
		deptList_data,
		getContactTitleList,
		contactTitleList_data,
		getVisit_cooperation_List,
		visit_cooperation_List_data,
		getIntentionLevelList,
		intentionLevelList_data,
		hasPermission
	} = useAppHookds()

	let {
		getUserList,
		userList_data
	} = useDataList()
	
	//模拟的项目详情数据
	let projectDetail = ref<ProjectItemTemplate>({
		projectId: "",
		projectName: '--',
		intentionLevel: '--',
		cooperationStatus: '--',
		contactName: '--',
		contactTitle: '--',
		contactInformation: '--',
		firstContactDate: '--',
		chargeName: '--',
		deptName: '--',
		teamInfo: '--',
		visitList: []
	});

	//意向度icon
	let expression = (item) : string => {
		let { intentionLevel } = item
		if (intentionLevel == '3') {
			//一般
			return 'icon-dai'
		} else if (intentionLevel == '2') {
			//较好
			return 'icon-xiaolian'
		} else if (intentionLevel == '1') {
			//很好
			return 'icon-xiaolianwawa'
		} else if (intentionLevel == '4') {
			//较差
			return 'icon-kulian1'
		} else if (intentionLevel == '5') {
			//很差
			return 'icon-kulian'
		} else {
			return "--"
		}
	}
	
	//是否显示"查看企业icon"
	let _isShowUserIcon = ref<string>('1')


	//获取详情
	let getProjectItem = (projectId : string) : void => {
		projectItem(projectId).then(res => {
			let { data } = res as ProjectItemResult
			projectDetail.value = data
		})
	}

	//去拜访详情
	let linktoVisitDetail = (visitId : string) => {
		uni.navigateTo({
			url: `/pages/visitItemDetail/visitItemDetail?visitId=${visitId}`
		})
	}

	//去企业详情
	let linktoUserDetail = () => {
		let { enterpriseId } = projectDetail.value
		uni.navigateTo({
			url: `/pages/userItemDetail/userItemDetail?enterpriseId=${enterpriseId}&isShowUserIcon=0`
		})
	}

	//去表单页
	let editProject = () : void => {
		let { projectId } = projectDetail.value
		uni.navigateTo({
			url: `/pages/addProject/index?projectId=${projectId}`
		})
	}

	//去新增拜访记录
	let linkToAddvisit = () : void => {
		let { projectId } = projectDetail.value

		uni.navigateTo({
			url: `/pages/addVisit/index?projectId=${projectId}`
		})
	}
	onLoad(e => {
		let { projectId, isShowUserIcon } = e as any
		if (projectId) {
			getProjectItem(projectId)
		}
		
		if(isShowUserIcon){
			_isShowUserIcon.value = isShowUserIcon
		}
	})
	onShow(() => {
		let { projectId } = projectDetail.value
		if (projectId) getProjectItem(projectId)
		getUserList()
	})
	onUnload(() => {
		_isShowUserIcon.value = '1'
	})
	onMounted(() => {
		getContactTitleList()
		getDeptList()
		getVisit_cooperation_List()
		getIntentionLevelList()
	})
</script>

<style lang="scss" scoped>
	.page-content {
		width: 100%;
		height: 100%;
		background: rgb(246, 246, 248);

		.main {
			display: block;
			flex: 1;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;

			.scroll-view_H {
				height: 100%;
			}

			.detail {

				.header,
				.subHeader {
					background: rgba(41, 45, 116, 1);
					border-radius: 20rpx;
					overflow: hidden;
				}

				.header {
					.projectName {
						border-bottom: 1px solid rgb(117, 119, 169);
						padding: 30rpx;
						box-sizing: border-box;
						color: #fff;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.text {
							width: calc(100% - 80rpx);
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: flex-start;

							.projectStatus {
								font-size: 45rpx;
								margin-right: 30rpx;


							}

							.iconfont {
								font-size: 45rpx;
							}

							.icon-dai {
								color: #feb122;
							}

							.icon-xiaolian {
								color: #cdf207;
							}

							.icon-xiaolianwawa {
								color: #04deb0;
							}

							.icon-kulian {
								color: #fc863b;
							}

							.icon-kulian1 {
								color: #ff4c4c;
							}

							.t {
								font-weight: bold;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						.icon {
							width: 80rpx;
							width: fit-content;
						}
					}

					.data {
						padding: 30rpx 30rpx 30rpx 105rpx;
						box-sizing: border-box;
						color: #fff;
						line-height: 50rpx;
						font-size: 28rpx;

						.enterpriseName {
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: flex-start;
						}
					}
				}

				.subHeader {
					margin-top: 20rpx;
					padding: 30rpx 30rpx 30rpx 105rpx;
					box-sizing: border-box;
					color: #fff;
					line-height: 50rpx;
					font-size: 28rpx;
				}
			}

			.list {
				margin-top: 20rpx;
				background: #fff;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
				border-radius: 20rpx;

				.table {

					.tabHeader .headerMain,
					.tabBody .item {
						.time {
							width: 220rpx;
							padding-right: 10rpx;
							box-sizing: border-box;
						}

						.status {
							width: 180rpx;
							padding-right: 10rpx;
							box-sizing: border-box;
						}

						.intention {
							width: 160rpx;
							padding-right: 10rpx;
							box-sizing: border-box;
						}

						.operate {
							width: 40rpx;
						}
					}

					.tabHeader {
						.headerMain {
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							border-bottom: 1px solid #f2f1f5;
							padding: 30rpx 40rpx;
							box-sizing: border-box;
							color: #4240a0;
							font-weight: 700;
						}
					}

					.tabBody {
						padding: 30rpx 20rpx;
						box-sizing: border-box;

						.item {
							border: 1px solif #e8e8e9;
							padding: 40rpx 20rpx;
							background: #f9f9fb;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20rpx;
							border-radius: 10rpx;
							overflow: hidden;

							.intention {
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-start;

								.iconfont {
									font-size: 45rpx;
									margin-right: 10rpx;
								}

								.icon-xiaolianwawa {
									color: #06dcaf;
								}

								.icon-xiaolian {
									color: #cbf206;
								}

								.icon-dai {
									color: #ffb022;
								}

								.icon-kulian {
									color: #f58740;
								}

								.icon-kulian1 {
									color: #ff4955;
								}
							}
						}
					}
				}
			}
		}

		.movable-area {
			width: 100%;
			position: fixed;
			pointer-events: none;
			top: 360rpx;

			.movable-view {
				width: fit-content;
				height: fit-content;
				pointer-events: auto;

				.movable-view-main {
					background: #fff;
					border-radius: 50%;
					overflow: hidden;

					.iconBox {
						width: 100rpx;
						height: 100rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-evenly;
						border-radius: 50%;
						overflow: hidden;

						.icon {
							width: 100rpx;
							height: 100rpx;
						}
					}
				}

			}
		}
	}
</style>